<template>
  <div class="app-container">
    <div class="form-container">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="产品" prop="proId">
                      <el-select v-model="searchForm.proId" 
                        clearable filterable placeholder="请选择产品" >
                          <el-option
                            v-for="item in products"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            <span style="float: left">{{ 'ID: ' + item.id }}</span>
                            <span style="float: right;  font-size: 14px">{{ item.name }}</span>
                          </el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                  <el-col :span="6">
                    <el-form-item label="产品类型" prop="proTpy">
                      <el-select v-model="searchForm.proTpy" 
                        clearable filterable placeholder="请选择产品类型" >
                          <el-option
                            v-for="item in types"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            <span style="float: left">{{ 'ID: ' + item.id }}</span>
                            <span style="float: right;  font-size: 14px">{{ item.name }}</span>
                          </el-option>
                      </el-select>
                    </el-form-item>
                </el-col>

                  <el-col :span="6">
                    <el-form-item label="仓库" prop="stoId">
                      <el-select v-model="searchForm.stoId" 
                        clearable filterable placeholder="请选择产品" >
                          <el-option
                            v-for="item in stores"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            <span style="float: left">{{ 'ID: ' + item.id }}</span>
                            <span style="float: right;  font-size: 14px">{{ item.name }}</span>
                          </el-option>
                      </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-button icon="el-icon-search" type="primary" circle @click="getData" />
                  <el-button icon="el-icon-refresh-right" type="warning" size="medium" round @click="resetForm('searchForm')">
                      重置
                    </el-button>
              </el-col>
            </el-row>
        </el-form>
    </div>

    <el-table stripe border fit highlight-current-row
    :header-cell-style="{textAlign: 'center'}"
     :cell-style="{ textAlign: 'center' }"
    :data="inventorys.slice((page - 1) * limit, page * limit)" style="width: 100%">

      <el-table-column label="ID" prop="id" width="60"/>
      <el-table-column label="仓库" prop="store.name" min-width="140"/>
      <el-table-column label="仓库地址" prop="store.address" min-width="140"/>
      <el-table-column label="产品" prop="product.name" min-width="140"/>
      <el-table-column label="产品类型" prop="product.type.name" min-width="140"/>
      <el-table-column label="价格" prop="product.price" width="60"/>
      <el-table-column label="数量" prop="num" width="60"/>
      <el-table-column label="总费用(元)" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.num  *  scope.row.product.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" min-width="90">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 5px">{{ $dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getData"/>
  </div>

</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination },
  data() {
    return {
      products:[],
      stores:[],
      types:[],
      inventorys:[],
      total: 0,
      listLoading: true,
      page: 1,
      limit: 5,
      searchForm: {
        proId:'',
        proTpy:'',
        stoId:'',
      },
    };
  },
  methods: {
    async getData() {
      // 获取产品信息
      let res = await this.$store.dispatch('product/getList',{name:'',typeId:""}) 
        if(res.code == 1) {
            // console.log(res.data);
            this.products = res.data 
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
       // 获取产品类型
       res = await this.$store.dispatch('type/getList') 
        if(res.code == 1) {
            this.types = res.data 
            //  console.log(res.data);
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
      // 获取仓库信息
       res = await this.$store.dispatch('myStore/getList',{name: "",address:""}) 
        if(res.code == 1) {
            this.stores = res.data 
            //  console.log(res.data);
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
      // 获取库存信息
       res = await this.$store.dispatch('inventory/getList',this.searchForm) 
      if(res.code == 1) {
          // console.log(res.data);
          this.inventorys = res.data 
          this.total = this.inventorys.length 
      }else{
          this.$message({ showClose: true,message: res.msg, type: 'error'})
      }
    },
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields()
      this.$message({ showClose: true, message: '清空成功', type: 'success' })
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
  .form-container {
    display: flex;
    width: 100%;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
  }
  .search {
    width: 100%;
    text-align: center;
    padding-left: 20px;
  }
  .search-more {
    width: 100%;
  }
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 90px;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
